<template>
  <div class="index">
    <!-- <a href="#top" class="biubiu iconfont">&#xe866;</a> -->
    <div class="nav" name="top">
      <div class="top"><div class="title">主页</div></div>
      <div class="bottom">
        <van-tabs v-model="channelId" class="nav-list" type="line">
          <!-- @click="channelSelect" -->
          <van-tab
            v-for="(item, index) in collectChannelList"
            :key="index"
            class="nav-item"
            :name="item.id"
          >
            <template #title class="item">
              <div class="item">{{ item.name }}</div>
            </template>
          </van-tab>
        </van-tabs>
        <!-- <ul class="nav-list">
          <li
            class="nav-item"
            v-for="(item, index) in collectChannelList"
            :key="index"
            @click="channelSwitchover = index"
          >
            <span :class="{ border: index === channelSwitchover }">{{
              item
            }}</span>
          </li>
        </ul> -->
        <div class="option" @click="showClick">
          <i class="iconfont">&#xe856;</i>
        </div>
      </div>
    </div>
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      success-text="刷新成功"
    >
      <div class="content">
        <ul class="journalism-list">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <li
              class="journalism-item"
              v-for="(item, index) in channelList"
              :key="index"
            >
              <div class="item-top" @click="toDetails(item)">
                <span>{{ item.title }}</span>
              </div>
              <div class="item-middle">
                <img
                  :src="item1"
                  alt=""
                  v-for="(item1, index1) in item.cover.images"
                  :key="index1"
                />
              </div>
              <div class="item-bottom">
                <span>{{ item.aut_name }}</span>
                <span>{{ item.comm_count }}评论</span>
                <span>{{ item.pubdate | formatTime }}</span>
                <i class="iconfont" @click="delArticle(index)">&#xe633;</i>
              </div>
            </li>
          </van-list>
        </ul>
        <!-- <div class="journalism-none" v-else>没有更多了</div> -->
      </div>
    </van-pull-refresh>
    <!-- 弹出层 -->
    <van-popup v-model="show" position="bottom">
      <div class="prop">
        <div class="prop-top">
          <div class="caption">
            我的频道<span v-if="compilexxx" @click="accomplishClick">完成</span
            ><span v-else @click="compileClick">编辑</span>
          </div>
          <ul class="channel-list">
            <li
              class="channel-item"
              v-for="(item, index) in collectChannelList"
              :key="index"
              @click="channelId = item.id"
            >
              <span :class="{ active: channelId === item.id }">{{
                item.name
              }}</span
              ><i
                class="iconfont "
                :class="{ conceal: compilexxx && index }"
                @click.stop="delClick(index)"
                >&#xe633;</i
              >
            </li>
            <li class="channel-item bd"></li>
            <li class="channel-item bd"></li>
            <li class="channel-item bd"></li>
            <li class="channel-item bd"></li>
          </ul>
        </div>
        <div class="prop-top mr">
          <div class="caption">推荐频道</div>
          <ul class="channel-list">
            <li
              class="channel-item"
              v-for="(item, index) in allList"
              :key="index"
              @click="addClick(index)"
            >
              {{ item.name }}
            </li>
            <li class="channel-item bd"></li>
            <li class="channel-item bd"></li>
            <li class="channel-item bd"></li>
            <li class="channel-item bd"></li>
          </ul>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  channels,
  articles,
  userChannels,
  alterUserChannels
} from '@/api/index.js'
import { getLocal } from '@/utils/local.js'
// import { Toast } from 'vant'
export default {
  name: 'index',
  data () {
    return {
      channelId: 0,
      show: false, // 弹出层的控制
      allList: [], // 全部频道列表
      collectChannelList: [{ id: 0, name: '推荐' }], // 我的频道
      compilexxx: false, // 编辑按钮控制删除频道
      channelSwitchover: 0, // 频道切换时,控制样式
      channelList: [], // 新闻列表
      isLoading: false, // 下拉
      loading: false,
      finished: false,
      arr: [] // 保存用户修改后的频道数据
    }
  },
  activated () {
    window.scrollTo(0, this.$route.meta.scrollTop)
  },
  async created () {
    // 获取全部频道列表
    const res = await channels()
    // console.log(res, '111')
    this.allList = res.data.data.channels

    // 获取对应频道新闻
    const res1 = await articles(0)
    console.log(res1, '频道新闻列表')
    this.channelList = res1.data.data.results
    // 获取用户频道列表
    // 获取用户频道列表的时候拿到token
    // const token = getLocal('token')
    // console.log(token)
    // // 判断是否有token
    // if (token) {
    const res2 = await userChannels()
    console.log(res2, '用户频道列表')
    this.collectChannelList = res2.data.data.channels
    // } else {
    //   const res2 = await userChannels(false)
    //   console.log(res2, '用户频道列表')
    //   this.collectChannelList = res2.data.data.channels
    // }
  },
  // mounted () {
  //   console.log(this.collectChannelList, 'mounted')
  //   console.log(this.allList, 'mounted')
  // },
  watch: {
    // 方法名:{
    //             deep:false(默认是false,如果改成true,可以监听对象里面原本存在的属性对应的值的修改)
    //             immediate:false(默认也是false,如果改成true,在监听的值第一次获取值的时候也也会执行下面方法)
    //             handler(newVal,oldVal){
    //             }
    //             对象的监听如果是修改了它的栈(改变了它的引用),监听不管deep:true还是false都可以监听到
    //         }
    // 监听弹出层显示与隐藏
    show: {
      handler (newVal, oldVal) {
        if (!newVal) {
          this.compilexxx = false
        }
      }
    },
    channelId: {
      async handler (newVal, oldVal) {
        console.log(newVal)
        const res = await articles(this.channelId)
        console.log(res, '频道新闻列表')
        this.channelList = res.data.data.results
        // console.log(new Date().getTime())
      }
    }
  },
  methods: {
    // 编辑按钮
    compileClick () {
      this.compilexxx = true
    },
    // 完成按钮
    async accomplishClick () {
      // 改为fales,使删除小图表隐藏,并且文字还原成编辑
      this.compilexxx = false
      // 隐藏弹出层
      this.show = false
      const token = getLocal('token')
      if (token) {
        const res = await alterUserChannels({ channels: this.arr })
        console.log(res, '完成按钮')
      }
    },
    // 频道列表按钮,弹出层的显示
    showClick () {
      this.show = true
      this.collectChannelList.forEach((item, index) => {
        this.allList.forEach((item1, index1) => {
          if (item1.name.indexOf(item.name) !== -1) {
            this.allList.splice(index1, 1)
          }
        })
      })
    },
    // 选择频道添加到我的频道
    addClick (index) {
      const token = getLocal('token')
      // 判断是否点了编辑
      if (!this.compilexxx) {
        return
      }
      // 判断是否有token,
      if (token) {
        const a = this.allList.splice(index, 1)[0]
        this.collectChannelList.push(a)
        const arr = []
        this.collectChannelList.forEach((item, index) => {
          arr.push({
            id: item.id,
            seq: index
          })
        })
        arr.splice(0, 1)
        this.arr = arr
        console.log(arr)
      } else {
        const a = this.allList.splice(index, 1)[0]
        this.collectChannelList.push(a)
      }
    },
    // // 主页频道的切换
    // async channelSelect (name, title) {
    //   console.log(name)
    //   const res = await articles({
    //     channel_id: this.channelId,
    //     with_top: 1
    //   })
    //   console.log(res)
    // },
    // 删除我的频道选项
    delClick (index) {
      const a = this.collectChannelList.splice(index, 1)[0]
      console.log(a)
      this.allList.push(a)
      const arr = []
      this.collectChannelList.forEach((item, index) => {
        arr.push({
          id: item.id,
          seq: index
        })
      })
      arr.splice(0, 1)
      this.arr = arr
      console.log(arr)
    },
    // 下拉刷新
    onRefresh () {
      setTimeout(async () => {
        const res1 = await articles(this.channelId)
        console.log(res1, '频道新闻列表')
        this.channelList = res1.data.data.results
        this.isLoading = false
        // Toast('刷新成功')
        this.isLoading = false
        this.count++
      }, 1000)
    },
    // list列表加载
    async onLoad () {
      const res = await articles(this.channelId)
      console.log(res, '频道新闻列表j加载')
      if (res.data.data.results.length === 0) {
        this.loading = false
        this.finished = true
      } else {
        this.channelList.push(...res.data.data.results)
        this.loading = false
      }
    },
    // 文章详情的跳转
    toDetails (item) {
      console.log(item)
      this.$router.push(`/details?id=${item.art_id}&path=/index`)
    },
    // 新闻删除按钮
    delArticle (index) {
      this.channelList.splice(index, 1)
    }
  }
}
</script>
<style lang="less" scoped>
.index {
  // .biubiu {
  //   position: fixed;
  //   top: 300px;
  //   right: 0;
  //   z-index: 999;
  // }
  // width: 375px;
  // padding-top: 60px;
  .nav {
    position: fixed;
    z-index: 9999;
    .top {
      width: 375px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      font-size: 20px;
      background-color: #d0584d;
    }
    .bottom {
      z-index: 999;
      display: flex;
      height: 46px;
      ::v-deep .van-tab {
        width: 94px;
      }
      // background-color: aquamarine;
      ::v-deep .nav-list {
        display: flex;
        overflow: auto;
        border-bottom: 1px solid #f5f6f7;
        justify-content: space-between;
        // flex: 1;
        // width: 100%;
        width: 330px;
        ::v-deep .nav-item {
          // width: 100px;
          flex: 1;
          z-index: 999;
          // width: 350px;
          // flex: 1 1 auto;
          // overflow: auto;
          // width: 60px;
          // padding: 0 10px;
          font-size: 14px;
          text-align: center;
        }
      }
      .option {
        width: 45px;
        // align-items: right;
        // margin: 0 8px;
        z-index: 999;
        background-color: #fff;
        text-align: center;
        i {
          font-size: 20px;
          line-height: 40px;
        }
      }
    }
  }
  .content {
    padding: 0px 15px;
    margin-top: 100px;
    .journalism-list {
      .journalism-item {
        border-bottom: 1px solid #f5f6f7;
        padding-bottom: 3px;
        .item-top {
          display: flex;
          margin-top: 20px;
          span {
            font-weight: 600;
            // padding: 20px 0;
            font-size: 16px;
            color: #323233;
          }
        }
        .item-middle {
          display: flex;
          justify-content: space-between;
          img {
            width: 100px;
            height: 80px;
            // object-fit: cover;
          }
        }
        .item-bottom {
          position: relative;
          // height: 20px;
          span {
            padding-right: 15px;
            font-size: 12px;
            color: #ccc;
          }
          .iconfont {
            position: absolute;
            right: 10px;
            top: 8px;
            font-size: 16px;
            color: #908e8c;
            border: 1px solid #908e8c;
            padding: 0 2px;
          }
        }
      }
    }
    .journalism-none {
      padding-top: 20px;
      text-align: center;
      font-size: 16px;
    }
  }
  .prop {
    // height: 300px;
    .prop-top {
      .caption {
        padding: 0 15px;
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        position: relative;
        span {
          padding: 10px 12px;
          line-height: 0;
          border: 1px solid red;
          border-radius: 15px;
          color: red;
          position: absolute;
          right: 15px;
          top: 10px;
        }
      }
      .channel-list {
        display: flex;
        flex-wrap: wrap;
        .channel-item {
          flex: 25%;
          height: 50px;
          line-height: 50px;
          text-align: center;
          font-size: 12px;
          border: 1px solid#f5f6f7;
          position: relative;
          i {
            position: absolute;
            width: 12px;
            height: 12px;
            font-size: 12px;
            top: 0;
            right: 0;
            line-height: 12px;
            color: #fff;
            // display: inline-block;
            background-color: #000;
            border-radius: 50%;
            display: none;
          }
          .conceal {
            display: block;
          }
          .active {
            color: red;
          }
        }
        .bd {
          border: none;
          height: 0px;
          // line-height: 2px;
        }
      }
    }
    .mr {
      margin-bottom: 30px;
    }
  }
}
</style>
